/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Input, Radio, Select, Checkbox, TreeSelect } from 'antd';
import {connect} from 'dva';
import request from '@/utils/request';
import { renderTreeNodes} from '@/utils/utils';

const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      villages:[]
    };
  }

  componentDidMount() {
    const that=this
    request(`/areas`, {
      method: 'GET',
      params:{
        return: 'all'
      }
    }).then((response)=> {
      if(response.status===200){
        that.setState({
          villages:response.data.data
        })
      }
    })
  }
  renderTreeNodes=(data)=>{
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode value={item.id} title={item.name} key={item.id} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return  <TreeNode value={item.id}  title={item.name} key={item.id} />
    });
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const {getFieldDecorator} = this.props.form;
    const plainOptions = ['901F', '90EF'];
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
              DMA名称
            </span>
            )}
          >
            {getFieldDecorator('name', {
              initialValue: this.props.editRecord ? this.props.editRecord.name : '',
              rules: [{required: true, message: 'DMA名称不能为空'}],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
             上级DMA
            </span>
            )}>
            {getFieldDecorator('parent_id', {
              initialValue: this.props.editRecord?this.props.editRecord.parent_id:'',
            })(
              <TreeSelect
                disabled={Boolean(this.props.editRecord)}
                allowClear
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              >
                {this.renderTreeNodes(this.state.villages)}
              </TreeSelect>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
             备注
            </span>
            )}
          >
            {getFieldDecorator('remark', {
              initialValue: this.props.editRecord ? this.props.editRecord.remark : '',
            })(
              <Input />
            )}
          </FormItem>


        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


